<!--编辑个人客户-->
<template>
    <div>
        <el-tabs v-model="activeName2" type="card" >
            <el-tab-pane label="个人信息" name="first">

                <el-row>
                    <!--修改历史记录内容-->
                    <el-dialog title="修改记录" :visible.sync="dialog.showHistory.open" size="large"
                               v-if="dialog.showHistory.open" :modal=false>
                        <el-row :gutter="20">
                            <el-col :span="3"><span>版本号</span></el-col>
                            <el-col :span="3"><span>编辑人</span></el-col>
                            <el-col :span="3"><span>提交时间</span></el-col>
                            <el-col :span="3"><span>审核时间</span></el-col>
                            <el-col :span="3"><span>审核结果</span></el-col>
                            <el-col :span="3">审核人</el-col>
                            <el-col :span="3">操作</el-col>
                        </el-row>
                        <el-row :gutter="20" style="padding: 20px 0">
                            <el-col :span="3"><span>1</span></el-col>
                            <el-col :span="3"><span>李文龙</span></el-col>
                            <el-col :span="3"><span>2016-07-07</span></el-col>
                            <el-col :span="3"><span>2017-07-07</span></el-col>
                            <el-col :span="3"><span>通过</span></el-col>
                            <el-col :span="3">袁裕国</el-col>
                            <el-col :span="3">查看此版本</el-col>
                        </el-row>
                    </el-dialog>
                    <el-col :span="6"><h2>个人资料</h2></el-col>

                </el-row>
                <!--上传用户头像-->
                <div style="margin-left:0px">
                    <p>点击上传图片</p>
                    <el-upload
                            class="avatar-uploader"
                            :action="fileUploadAction"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                <el-form :label-position="pos" label-width="100px" ref="ruleForm" :rules="rules" :model="form">
                    <el-form-item label="姓名*" prop="name" :rules="[qfValidator.checkName(),qfValidator.checkLength(2,5)]">
                        <el-input  placeholder="姓名" style="width: 300px" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item width="100px" label="手机号(联系电话)*" prop="phoneNumb" :rules="[qfValidator.checkLine()]">
                        <el-input  placeholder="手机号(联系电话)*" style="width: 300px" v-model="form.phoneNumb"></el-input>
                    </el-form-item>
                    <!--领域-->
                    <!--循环生成-->
                    <el-form-item  label="领域(必填)">
                        <span style="display: inline-block;border:1px solid gray;border-radius: 2px;line-height:20px;margin-right: 10px " v-for="data in array">{{data}}</span>
                        <div style="display: inline-block">
                            <el-button type="info" @click="openDialog('addField')" size="small">设置领域</el-button>
                        </div>
                    </el-form-item>
                    <!--增加按钮-->
                    <el-form-item label="角色" prop="personCheck">
                        <template>
                            <el-checkbox-group v-model="form.personCheck">
                                <el-checkbox label="复选框 A"></el-checkbox>
                                <el-checkbox label="复选框 B"></el-checkbox>
                                <el-checkbox label="复选框 C"></el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </el-form-item>
                    <el-form-item label="" label-width="0">
                        <p>总体描述(必填)</p>
                        <script id="editor" type="text/plain"></script>
                    </el-form-item>
                </el-form>
                <!--增加领域-->
                <el-dialog title="增加领域" :visible.sync="dialog.addField.open" v-if="dialog.addField.open" :modal="false">
                    <template>
                        <!--领域选项-->
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="复选框 A"></el-checkbox>
                            <el-checkbox label="复选框 B"></el-checkbox>
                            <el-checkbox label="复选框 C"></el-checkbox>
                            <el-checkbox label="复选框 d"></el-checkbox>
                            <el-checkbox label="复选框 e"></el-checkbox>
                            <el-checkbox label="复选框 f"></el-checkbox>
                            <el-checkbox label="复选框 g"></el-checkbox>
                            <el-checkbox label="复选框 h"></el-checkbox>
                            <el-checkbox label="复选框 h"></el-checkbox>
                        </el-checkbox-group>
                        <el-button type="primary" size="small" @click="commit('addField')">确定</el-button>
                    </template>
                </el-dialog>
                <!--能力画像-->
                <!--<el-row :gutter="20">-->
                <!--<el-col :span="20"><div style="height:200px;background:#F7F7F7;">-->
                <!--这里是文字描述-->
                <!--</div></el-col>-->
                <!--</el-row>-->
                <!--<h4>关系网</h4>-->
                <!--<el-form :inline="true" :model="formInline" class="demo-form-inline" style="border-bottom: 1px dashed gray;padding-top: 10px;padding-bottom: 10px" v-for="(item,index) in relativeNetwork" scope="scope" >-->
                <!--<template>-->
                <!--<span>关系单位</span>-->
                <!--<el-select v-model="value[index].link" placeholder="请选择">-->
                <!--<el-option-->
                <!--v-for="data in item.linkUnit"-->
                <!--:key="data.value"-->
                <!--:label="data.label"-->
                <!--:value="data.value">-->
                <!--</el-option>-->
                <!--</el-select>-->
                <!--</template>-->
                <!--<template>-->
                <!--<span>任职</span>-->
                <!--<el-select v-model="value[index].job" placeholder="请选择">-->
                <!--<el-option-->
                <!--v-for="data in item.inOffice"-->
                <!--:key="data.value"-->
                <!--:label="data.label"-->
                <!--:value="data.value">-->
                <!--</el-option>-->
                <!--</el-select>-->
                <!--</template>-->
                <!--<template>-->
                <!--<span>服务偏好</span>-->
                <!--<el-select v-model="value[index].hobby" placeholder="请选择">-->
                <!--<el-option-->
                <!--v-for="data in item.preference"-->
                <!--:key="data.value"-->
                <!--:label="data.label"-->
                <!--:value="data.value">-->
                <!--</el-option>-->
                <!--</el-select>-->
                <!--</template>-->
                <!--<el-button type="text" @click="linkDel(index)">删除</el-button>-->
                <!--</el-form>-->
                <!--<el-button type="primary" size="small" @click="addLink" style="margin-top: 20px">新增关系</el-button>-->
                <!--<el-row>-->
                <!--<div style="margin: 10px auto;text-align: center">-->
                <!--<el-button type="primary" size="large" @click="submitForm('ruleForm')">确定</el-button>-->
                <!--</div>-->
                <!--</el-row>-->
            </el-tab-pane>
            <el-tab-pane label="附件栏" name="fourth" >
                <!--照片-->
                <el-form  class="demo-form-inline" label-width="100px" :label-position="position">
                    <el-form-item label="照片">
                        <el-upload
                                class="upload-demo"
                                :on-change="handleChange0"
                                :action="fileUploadAction"
                                :before-upload="beforeUpload0"
                                :file-list="fileList0">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <span>(最多一份)</span>
                        </el-upload>

                    </el-form-item>
                    <!--名片-->
                    <el-form-item label="名片">
                        <el-upload
                                class="upload-demo"
                                :on-change="handleChange1"
                                :action="fileUploadAction"
                                :file-list="fileList1">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <span>(最多六份)</span>
                        </el-upload>
                    </el-form-item>
                    <!--其他附件-->
                    <el-form-item label="其他附件">
                        <el-upload
                                class="upload-demo"
                                :on-change="handleChange2"
                                :action="fileUploadAction"
                                :file-list="fileList2">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <span>(最多六份)</span>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <div style="width:100px;margin: 0 auto"><el-button type="primary" @click="submitForm('ruleForm')">确定</el-button></div>
    </div>
</template>
<script>
    import _http from '@/components/common/http.vue'
    import _param from '@/components/common/param.vue'
    //    import qfValidator from '@/components/common/yzValidator.js'
    import '@/assets/ueditor/ueditor.config.js'
    import '@/assets/ueditor/ueditor.all.min.js'
    import '@/assets/ueditor/ueditor.parse.min.js'
    import '@/assets/ueditor/lang/zh-cn/zh-cn.js'
    export default {
        data() {
            return {
                position:'left',
                //    照片
                fileList0:[],
//                名片
                fileList1:[],
//                其他
                fileList2:[],
//
//                图像地址
                imageUrl: '',
                pos:'left',
                i:0,
                linkArr:[],
                array:[],
//                控制弹出层的数据
                dialog:{
                    addField:{
                        open:false
                    },
                    showHistory:{
                        open:false
                    }
                },
                checkList: [],
                activeName2: 'first',
                radio2:'3',
                formInline: {
                    user: '',
                    region: ''
                },
                form:{
                    name:'',
                    phoneNumb:'',
                    personCheck:[],
                },
                editor:null,
                value2:'',
                value3:'',
                value:[
                    {link:'',job:'',hobby:''}
                ],
                //                文件上传路径封装
                fileUploadAction:_param.param.fileUploadUrl,
                baseValue:{
                    money:'5000',
                    faren:'俞兆洪',
                    linkMan:'成莹',
                    address:'浙江省 杭州市 萧山区 民和路 479号1701',
                    Email:'service@tanwin.cn',
                    phoneNum:'057156686688',
                    fax:'057156686688',
                    url:'www.tanwin.cn'
                },
                rules: {
//                    name: [
//                        { required: true, message: '请输入姓名', trigger: 'blur' },
//                        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
//                    ],
                    personCheck: [
                        { type: 'array', required: true, message: '选择角色类别', trigger: 'change' }
                    ],
                }
            }
        },
        methods:{
            //        头像上传成功并取到返回值
            handleAvatarSuccess(res, file) {
                console.log(res)
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
//            const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

//            if (!isJPG) {
//                this.$message.error('上传头像图片只能是 JPG 格式!');
//            }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            //            附件部分头像上传
            beforeUpload0(file){
//                console.log(this.fileList0)
//                console.log(file)
            },
//            change事件
            handleChange0(file, fileList) {
//                console.log(fileList)
                this.fileList0 = fileList.slice(-1);
                console.log(this.fileList0)
            },
            handleChange1(file, fileList) {
//                console.log(fileList)
                this.fileList1 = fileList.slice(-6);
                console.log(this.fileList1)
            },
            handleChange2(file, fileList) {
//                console.log(fileList)
                this.fileList2 = fileList.slice(-6);
                console.log(this.fileList2)
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                return false;
            }
            });
            },
            openDialog(dialog){
                this.dialog[dialog].open = true
            },
//            添加领域并且去重
            commit(addField){
                for(var i in this.checkList ){
                    if(this.array.indexOf(this.checkList[i])==-1){
                        this.array.push(this.checkList[i])
                    }
                }
                this.dialog[addField].open = false
            },
//            添加关系函数
            addLink(){
                this.relativeNetwork.push(
                        {
//                        关系单位
                            linkUnit:[
                                {
                                    value: '选项1',
                                    label: '黄金糕'
                                }, {
                                    value: '选项2',
                                    label: '双皮奶'
                                }
                            ],
//                        任职
                            inOffice:[
                                {
                                    value: '选项3',
                                    label: '蚵仔煎'
                                }, {
                                    value: '选项4',
                                    label: '龙须面'
                                }
                            ],
//                        服务偏好
                            preference:[
                                {
                                    value: '选项4',
                                    label: '龙须面'
                                }, {
                                    value: '选项5',
                                    label: '北京烤鸭'
                                }
                            ]
                        }
                )
                this.value.push(
                        {link:'',job:'',hobby:''}
                )
            },
//            删除关系
            linkDel(index){
                this.relativeNetwork.splice(index,1)
                this.value.splice(index,1)
            },
            getUEContent() {
                // 获取内容方法
                console.log( this.editor.getContent())
            }
        },
//        富文本
        mounted(){
            this.editor = UE.getEditor('editor');
        },
        destroyed() {
            this.editor.destroy();
        },

    }
</script>
<style>
    ul li{
        list-style: none;
        margin-top: 20px;
    }
    .listSty{
        display:inline-block;
        width: 120px
    }
    .mainListSty{
        display:inline-block;
        width: 120px;
    }
    .able:after{
        content: "√";
        color: #6ce26c;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
        margin-left: 10px;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }

</style>